import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Alert, Divider, Select, message } from 'antd';
import router from 'umi/router';
import { digitUppercase } from '@/utils/utils';
import styles from './style.less';
import { identifyType } from '../../../../../common/selectOption';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ createdForm, loading }) => ({
  submitting: loading.effects['createdForm/submitStepForm'],
  createdForm,
}))
@Form.create()
class Step3 extends React.PureComponent {
  state = {
    data: {},
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch } = this.props;
    let enterpriseDetail = localStorage.getItem('enterpriseDetail');

    dispatch({
      type: 'createdForm/fetchBankList',
    });
    let step3 = localStorage.getItem('step3');
    if (step3) {
      this.setState({
        data: JSON.parse(step3),
      });
    } else if (enterpriseDetail) {
      this.setState({
        data: JSON.parse(enterpriseDetail),
      });
    }
  }

  render() {
    const {
      form,
      dispatch,
      submitting,
      createdForm: { bankList },
    } = this.props;
    const { getFieldDecorator, validateFields } = form;
    const { data } = this.state;
    const {
      location: { query },
    } = this.props;

    const onPrev = () => {
      router.push({
        pathname: '/preloan/enterprise/create/step2',
        query: query,
      });
    };
    const onNext = e => {
      e.preventDefault();
      validateFields((err, values) => {
        if (!err) {
          router.push({
            pathname: '/preloan/enterprise/create/step4',
            query: query,
          });
          localStorage.setItem('step3', JSON.stringify(values));
        }
      });
    };

    return (
      <Form layout="horizontal" className={styles.stepForm}>
        {bankList ? (
          <Form.Item {...formItemLayout} label="开户银行名称" required={false}>
            {getFieldDecorator('bankNo', {
              initialValue: data.bankNo,
              rules: [{ required: true, message: '请选择开户银行名称' }],
            })(
              <Select placeholder="请选择开户银行名称">
                {bankList.map(item => (
                  <Select.Option value={item.bankNo} key={item.bankNo}>
                    {item.bankName}
                  </Select.Option>
                ))}
              </Select>
            )}
          </Form.Item>
        ) : (
          ''
        )}
        <Form.Item {...formItemLayout} label="还款银行账户" required={false}>
          {getFieldDecorator('bankAccount', {
            initialValue: data.bankAccount,
            rules: [{ required: true, message: '请填写还款银行账户' }],
          })(<Input type="text" placeholder="请填写还款银行账户" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} label="开户行许可证号" required={false}>
          {getFieldDecorator('bankPermissionCode', {
            initialValue: data.bankPermissionCode,
            rules: [{ required: true, message: '请填写开户行许可证号' }],
          })(<Input type="text" placeholder="请填写开户行许可证号" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} label="开户支行名称" required={false}>
          {getFieldDecorator('bankSubBranchName', {
            initialValue: data.bankSubBranchName,
            rules: [{ required: true, message: '请填写开户支行名称' }],
          })(<Input type="text" placeholder="请填写开户支行名称" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} label="银行卡归属地" required={false}>
          {getFieldDecorator('bankAttach', {
            initialValue: data.bankAttach,
            rules: [{ required: true, message: '请填写银行卡归属地' }],
          })(<Input type="text" placeholder="请填写银行卡归属地" />)}
        </Form.Item>
        <Form.Item
          style={{ marginBottom: 8 }}
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: {
              span: formItemLayout.wrapperCol.span,
              offset: formItemLayout.labelCol.span,
            },
          }}
          label=""
        >
          <Button onClick={onPrev}>上一步</Button>
          <Button type="primary" onClick={onNext} loading={submitting} style={{ marginLeft: 8 }}>
            下一步
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Step3;
